import React, { memo, FC } from 'react';
import classnames from 'classnames';

import './index.module.scss';
interface FilterProps {
  name: string;
  checked: boolean;
  value: string;
  dispatch: (obj: any) => void;
}
const Filter: FC<FilterProps> = memo(function Filter(props: FilterProps) {
  const { name, checked, value, dispatch } = props;

  return (
    <li
      className={classnames({ checked })}
      onClick={() => dispatch({ payload: value, type: 'toggle' })}
    >
      {name}
    </li>
  );
});
export default Filter;
